<template>
    <div>
        <!-- 为 ECharts 准备一个定义了宽高的 DOM-->
        <el-row>
            <el-col :span="12">
                <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                <div id="main" style="width:600px;height:600px;"></div>
            </el-col>
            <el-col :span="12">
                <el-table :data="tableData" :header-cell-style="{ textAlign: 'center' }"
                    :cell-style="{ textAlign: 'center' }">
                    <!-- 动态添加表格列  -->
                    <el-table-column v-for="(item, index) in column" :key="index" :formatter="item.formatter"
                        :label="item.label" :prop="item.prop">
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
    </div>

</template>
 
<script>
import api from "../../api/index.js";
export default {
    name: 'replyEchart',
    data() {
        return {
            tableData: [],//应该显示的数据
            column: [
                {
                    label: '商品ID',
                    prop: 'id'
                },
                {
                    label: '商品',
                    prop: 'name'
                },
                {
                    label: '评价类型',
                    prop: 'etype',
                    formatter: row => {
                        return row.etype === 0 ? '好评' : row.etype === 1 ? '中评' : '差评'
                    },
                },
                {
                    label: '评价内容',
                    prop: 'content'
                },
            ],//动态添加表格项column
            default: [],//存放echarts的name和value属性
        }
    },
    methods: {
        //初始化表格数据
        init() {
            return new Promise(reslove => {
                api.reply.getReplyEchart().then((res) => {
                    let { data } = res;
                    reslove(data)
                })
            })
        },
        initChar() {
            this.default = this.tableData.map((item) => {
                return Object.assign({}, { name: item.name, value: item.value })
            })//提取name 和 value 这两个属性
            this.char = this.$echarts.init(document.getElementById("main"));
            return new Promise(reslove => {
                api.reply.getReplyEchart().then((res) => {
                    let { data } = res;
                    console.log('this.default:', this.default);
                    this.char.setOption({
                        title: {
                            text: "手机购买配额占比图"
                        },
                        series: [
                            {
                                name: 'Nightingale Chart',
                                type: 'pie',
                                radius: [50, 250],
                                center: ['50%', '50%'],
                                roseType: 'area',
                                itemStyle: {
                                    borderRadius: 8
                                },
                                data: this.default
                            }
                        ]
                    })
                    reslove(data)
                })
            })
        }//初始化echarts图表
    },
    async created() {
        //页面创建获取数据渲染
        this.tableData = await this.init()
        this.initChar()
    },
}
</script>
 
<style scoped lang='scss'>

</style>